<template>  
    <div class="device-details">  
      <h1>{{ device.name }}</h1>  
      <h2>设备信息</h2>  
      <div class="device-info">  
        <p>设备类型: {{ device.type }}</p>  
        <p>设备ID: {{ device.id }}</p>  
        <p>设备状态: {{ deviceStatus(device.status) }}</p>  
      </div>  
      <h2>厂商信息</h2>  
      <div class="manufacturer-info">  
        <p>厂商名称: {{ manufacturer.name }}</p>  
        <p>联系电话: {{ manufacturer.phone }}</p>  
        <p>资质: {{ manufacturer.qualification }}</p>  
        <p>专利: {{ manufacturer.patent }}</p>  
        <p>所属地区: {{ manufacturer.location }}</p>  
      </div>  
      <h2>设备应用</h2>  
      <div class="device-application">  
        <p>功能描述: {{ deviceApplication.description }}</p>  
        <p>适用场景: {{ deviceApplication.scenarios }}</p>  
        <p>部署方式: {{ deviceApplication.deployment }}</p>  
        <p>通信协议: {{ deviceApplication.protocol }}</p>  
        <p>安全特性: {{ deviceApplication.security }}</p>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'DeviceDetails',  
    props: {  
      device: {  
        type: Object,  
        required: true  
      },  
      manufacturer: {  
        type: Object,  
        required: true  
      },  
      deviceApplication: {  
        type: Object,  
        required: true  
      }  
    },  
    methods: {  
      deviceStatus(status) {  
        // status是一个数字或字符串，表示设备的状态  
        switch (status) {  
          case 1:  
            return '在线';  
          case 0:  
            return '离线';  
          default:  
            return '未知状态';  
        }  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .device-details {  
    padding: 20px;  
    font-family: Arial, sans-serif;  
  }  
    
  .device-info, .manufacturer-info, .device-application {  
    margin-bottom: 20px;  
  width: 100%;  
  /* 设置内边距，以提供空间 */  
  padding: 10px;   
  background-color: #f9f9f9;  
  border: 1px solid #ddd;  
  /* 设置边框圆角 */  
  border-radius: 4px;  
  /* 盒模型设置为包含边框和内边距 */  
  box-sizing: border-box;  
  /* 字体样式 */  
  font-size: 14px;  
  /* 文本颜色 */  
  color: #333;  
  list-style-type: none;  
  padding-left: 0; 
  }  
  </style>